<template>
  <div class="hot-money-detail">
    <!-- 页面级Loading -->
    <div v-if="pageLoading" class="page-loading">
      <div v-loading="true" element-loading-text="正在加载游资信息..." element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)" class="loading-overlay">
        <div style="height: 100vh;"></div>
      </div>
    </div>

    <!-- 错误信息显示 -->
    <div v-else-if="pageError" class="page-error">
      <el-result icon="error" :title="errorTitle" :sub-title="errorMessage">
        <template #extra>
          <el-button type="primary" @click="retryLoad">重新加载</el-button>
        </template>
      </el-result>
    </div>

    <!-- 正常内容 -->
    <div v-else>
      <div class="page-header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/hot-money-list' }">游资列表</el-breadcrumb-item>
          <el-breadcrumb-item>{{ hotMoneyData.dbHotMoney.name || '游资' }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="content-area">
        <el-card class="detail-card">
          <div class="investor-profile">
            <!-- 头像区域 -->
            <div class="avatar-section">
              <el-avatar :size="100" :src="hotMoneyData.dbHotMoney.avatar" class="avatar">
                <span>{{ hotMoneyData.dbHotMoney.name }}</span>
              </el-avatar>
              <div class="status-badge">
                <el-icon>
                  <Lightning />
                </el-icon>
              </div>
            </div>

            <!-- 基本信息区域 -->
            <div class="basic-info">
              <div class="info-row">
                <div class="label-section">
                  <span class="label">游资代号：</span>
                  <span class="label">大牛简介：</span>
                  <span class="label">营 业 部：</span>
                </div>
                <div class="value-section">
                  <span class="value description">{{ hotMoneyData.dbHotMoney.name }}</span>
                  <span class="value description">{{ hotMoneyData.dbHotMoney.desc }}</span>
                  <span class="value description">{{hotMoneyData.dbHotMoney.orgs.split('|').map(s =>
                    s.trim()).filter(Boolean).join(',')}}</span>
                </div>
              </div>


            </div>
          </div>
        </el-card>


        <!-- 统计数据卡片 -->
        <div class="stats-grid">
          <el-card v-for="(chart, index) in hotMoneyData.topChart" :key="index" class="stat-card">
            <div class="stat-content">
              <div class="stat-title">
                {{ chart.title }}
              </div>
              <div class="stat-value">
                {{ chart.value }}
                <span v-if="chart.chang !== null" :class="chart.isUp ? 'up' : 'down'">
                  {{ chart.isUp ? '+' : '' }}{{ chart.chang }}
                </span>
              </div>
              <div class="stat-change">
                <MiniChart v-if="chart.type !== 'hide' && chart.type !== 'minibar'" :chartData="getChartData(chart)" :color="getChartColor(index)"
                  :chartType="getChartType(index)" height="100px" />
                <MiniBarChart v-if="chart.type === 'minibar'" :chartData="chart" height="100px" />
              </div>
            </div>
          </el-card>
        </div>


        <!-- 持仓详情表格 -->
        <HoldingsTable :external-loading="pageLoading" :hot-money-data="hotMoneyData" @refresh="refreshHoldings"
          @view-detail="viewStockDetail" />
      </div>
    </div> <!-- 正常内容结束 -->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Lightning } from '@element-plus/icons-vue'
import MiniChart from '@/components/chart/MiniChart.vue'
import MiniBarChart from '@/components/chart/MiniBarChart.vue'
import HoldingsTable from '@/components/HoldingsTable.vue'
import { hotMoneyAPI } from '@/utils/api'

// 路由
const route = useRoute()

// 页面状态管理
const pageLoading = ref(false)
const pageError = ref(false)
const errorMessage = ref('')
const errorTitle = ref('请求失败')



// 游资详情数据
const hotMoneyData = ref({
  hotMoneyId: null,
  dbHotMoney: {
    name: '',
    desc: '',
    orgs: ''
  },
  charts: []
})

// 获取游资信息
const fetchHotMoneyData = async () => {
  // 开始加载
  pageLoading.value = true
  pageError.value = false

  try {
    const id = route.params.id
    if (!id) {
      throw new Error('缺少游资ID')
    }

    const data = await hotMoneyAPI.getHotMoneyData(id)

    if (data && data.succeeded && data.data) {
      const resp = data.data
      hotMoneyData.value = resp

      console.log('hotMoneyData', resp)

      // 加载成功
      pageLoading.value = false
    } else {
      pageLoading.value = false
      pageError.value = true
      errorTitle.value = '请求失败'
      errorMessage.value = data?.errors || '获取游资信息失败'
    }
  } catch (error) {
    // 错误已由拦截器提示，这里仅设置页面状态
    pageLoading.value = false
    pageError.value = true
    errorTitle.value = '请求失败'
    errorMessage.value = error?.message || '获取游资信息失败'
  }
}





// 获取图表数据
const getChartData = (chart) => {
  if (!chart.data || !chart.date) {
    return { data: [], dates: [], smooth: true, showArea: true }
  }

  return {
    data: chart.data, // 转换为万元
    dates: chart.date.map(date => date.substring(5).replace('-', '-')), // 格式化日期
    smooth: true,
    showArea: true,
    chartType: chart.data.type
  }
}

// 获取图表颜色
const getChartColor = (index) => {
  const colors = ['#67C23A', '#409EFF', '#E6A23C', '#F56C6C', '#909399']
  return colors[index % colors.length]
}

// 获取图表类型
const getChartType = (index) => {
  // 第二个图表使用柱状图，其他使用折线图
  return index === 1 ? 'bar' : 'line'
}



// 刷新持仓数据
const refreshHoldings = () => {
  ElMessage.success('正在刷新持仓数据...')
  // 重新获取游资数据，包含持仓信息
  fetchHotMoneyData()
}

// 查看股票详情
const viewStockDetail = (stock) => {
  ElMessage.info(`查看 ${stock.stockName} 详情`)
}

// 重新加载数据
const retryLoad = () => {
  fetchHotMoneyData()
}



// 组件挂载时获取数据
onMounted(() => {
  fetchHotMoneyData()
})

</script>

<style scoped>
.hot-money-detail {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
  position: relative;
}

/* 页面级Loading样式 */
.page-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.loading-overlay {
  width: 100%;
  height: 100%;
}

/* 错误页面样式 */
.page-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 40px;
}

.page-header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}



.content-area {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-card {
  border-radius: 8px;
}

.investor-profile {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 16px 0;
}

.avatar-section {
  position: relative;
}

.avatar {
  position: relative;
  border-radius: 52px;
}

.status-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 31.25px;
  height: 31.25px;
  background: #FFD700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.basic-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-row {
  display: flex;
  gap: 8px;
}

.label-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 80px;
}

.value-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.label {
  color: #4E5969;
  font-size: 14px;
  line-height: 22px;
  font-family: 'Alibaba PuHuiTi 2.0', sans-serif;
  font-weight: 300;
}

.value {
  color: #1D2129;
  font-size: 14px;
  line-height: 22px;
  font-family: 'Alibaba PuHuiTi 2.0', sans-serif;
  font-weight: 300;
}



.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-card {
  border-radius: 8px;
}

.stat-title {
  font-family: HarmonyOS Sans SC;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: normal;
  color: #1D2129;
}

.stat-value {
  padding-top: 12px;
  font-family: HarmonyOS Sans SC;
  font-size: 30px;
  font-weight: bold;
  line-height: 34px;
  letter-spacing: normal;
  color: #1D2129;
}

.stat-value span {
  font-size: 14px;
}

.stat-value span.down {
  color: #529B2E;
}

.stat-value span.up {
  color: #EA0000;
}

.up {
  color: #67C23A;
}

.down {
  color: #F56C6C;
}



@media (max-width: 768px) {
  .investor-profile {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .info-row {
    flex-direction: column;
    gap: 4px;
  }

  .label-section,
  .value-section {
    min-width: auto;
  }
}
</style>